<template>
	<div class="study-exam padding20">
		<el-button class="back-button" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
		<el-steps :active="step" finish-status="success" align-center>
			<el-step title="第一步" description="创建试卷"></el-step>
			<el-step title="第二步" description="考试设置"></el-step>
		</el-steps>

		<br />

		<studyexam-step-first ref="studyexamStepFirstRef" :formData="formData" v-show="step == 0"></studyexam-step-first>
		<studyexam-step-second
			ref="studyexamStepSecond"
			:isQuartzTime.sync="isQuartzTime"
			:formData="formData"
			v-show="step == 1"
		></studyexam-step-second>
		<br />
		<el-button @click="$router.go(-1)">返回</el-button>
		<el-button v-if="step == 0" @click="onNextStep">下一步</el-button>
		<template v-else-if="step == 1">
			<el-button @click="onPrevStep">上一步</el-button>
			<el-button type="primary" @click="onSketch">保存草稿</el-button>
			<el-button type="primary" @click="onPublish">发布</el-button>
		</template>
	</div>
</template>

<script>
import studyexamStepFirst from "./components/studyexam-step-first"
import studyexamStepSecond from "./components/studyexam-step-second"
import { studyexamInfo, studyexamSave, studyexamEdit } from "@/api/study/exam/studyexam.js"

export default {
	name: "study-exam",
	data() {
		return {
			step: 0,

			formData: {
				id: "",
				examName: "",
				coverImg: "",
				examTime: "",
				examExplain: "",
				examNum: 1,
				isLimited: 2,
				showAnswerTime: 2,
				examShowType: "",
				examStartTime: "",
				examEndTime: "",
				mode: "",
				singleNum: "",
				singleScore: "",
				multipleNum: "",
				multipleScore: "",
				qualifiedScore: "",
				totalScore: "",
				status: "",
				isOutOrder: "",
				isRemind: 2,
				startRemind: "",
				endRemind: "",
				pushMessage: 1,
				quartzTime: "",
				createUser: "",
				createTime: "",
				updateUser: "",
				updateTime: "",
				isDeleted: "",
				memberAuthorityDto: {
					userGroup: [],
					member: [],
				},
			},
			isQuartzTime: false,
		}
	},
	computed: {
		isEdit() {
			return !!this.$route.query.id
		},
	},
	async created() {
		if (this.isEdit) {
			const { code, data, msg } = await studyexamInfo(this.$route.query.id)
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.formData = data

			if (this.formData.quartzTime) {
				this.isQuartzTime = true
			}

			this.$refs.studyexamStepFirstRef.question.selection = [
				...this.formData.examQuestionDTOList.map(item => {
					return {
						...item,
						id: item.questionId,
					}
				}),
			]

			if (this.formData.memberAuthorityDto) {
				const { groupId, groupName, memberId, memberName } = this.formData.memberAuthorityDto
				const gruopIds = groupId ? groupId.split(",") : []
				const groupNames = groupName ? groupName.split(",").filter(item => item) : []
				const memberIds = memberId ? memberId.split(",") : []
				const memberNames = memberName ? memberName.split(",").filter(item => item) : []

				this.formData.memberAuthorityDtoId = this.formData.memberAuthorityDto.id
				this.formData.memberAuthorityDto = {
					userGroup: [
						...gruopIds.map((item, index) => {
							return {
								id: item,
								name: groupNames[index],
							}
						}),
					],
					member: [
						...memberIds.map((item, index) => {
							return {
								id: item,
								nickName: memberNames[index],
							}
						}),
					],
				}
			}
		}
	},
	methods: {
		onNextStep() {
			if (this.formData.totalScore == 0) {
				this.$message.error("请先选择题目并设置分数")
				return
			}
			this.step = 1
		},
		onPrevStep() {
			this.step = 0
		},

		async onSave() {
			try {
				if (this.formData.examName == "") {
					throw new Error("请输入试卷名称")
				}
				// if (!this.formData.coverImg) {
				// 	throw new Error("请上传封面")
				// }
				if (this.formData.examTime == "") {
					throw new Error("请输入考试时长")
				}
				if (this.formData.qualifiedScore == "") {
					throw new Error("请输入合格分")
				}
				if (this.formData.examStartTime == "") {
					throw new Error("请输入考试开始时间")
				}
				if (this.formData.examEndTime == "") {
					throw new Error("请输入考试结束时间")
				}
				if (new Date(this.formData.examStartTime) <= new Date()) {
					throw new Error("考试开始时间不能小于当前时间")
				}
				if (new Date(this.formData.examStartTime) >= new Date(this.formData.examEndTime)) {
					throw new Error("考试开始时间不能大于结束时间")
				}
				if (this.formData.isRemind == 1) {
					if (this.formData.endRemind == "") {
						throw new Error("请输入考试结束前提醒时间")
					}
				} else {
					this.formData.startRemind = ""
					this.formData.endRemind = ""
				}
				if (this.isQuartzTime) {
					if (this.formData.quartzTime == "") {
						throw new Error("请输入定时发布时间")
					}
					if (
						new Date(this.formData.quartzTime) <= new Date() ||
						new Date(this.formData.quartzTime) >= new Date(this.formData.examStartTime)
					) {
						throw new Error("定时发布时间不能晚于试卷开始时间不能早于当前时间")
					}
				} else {
					this.formData.quartzTime = ""
				}

				this.formData.examQuestionDTOList = [...this.$refs.studyexamStepFirstRef.question.selection]

				const query = {
					...this.formData,
					memberAuthorityDto: {
						groupId: this.formData.memberAuthorityDto.userGroup.map(item => item.id).join(","),
						memberId: this.formData.memberAuthorityDto.member.map(item => item.id).join(","),
						id: this.formData.memberAuthorityDtoId || "",
					},
				}

				if (this.isEdit) {
					const { code, msg } = await studyexamEdit(query)
					if (code != 0) {
						throw new Error(msg)
					}
					this.$message.success(msg)
					this.$router.go(-1)
				} else {
					const { code, msg } = await studyexamSave(query)
					if (code != 0) {
						throw new Error(msg)
					}
					this.$message.success(msg)
					this.$router.go(-1)
				}
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async onSketch() {
			this.formData.status = 1

			this.onSave()
		},
		async onPublish() {
			this.formData.status = this.isQuartzTime ? 5 : 2

			this.onSave()
		},
	},
	components: {
		studyexamStepFirst,
		studyexamStepSecond,
	},
}
</script>

<style lang="scss" scoped>
.study-exam {
	.tip {
		color: red;
		font-size: 14px;
		line-height: 3;
	}
}
</style>
